import React,{useState,useEffect} from 'react'
import './css/index.css'
import Header from "../index/component/header";
import Searchbar from '../index/component/searchbar';
import Bread from './component/breadcrumb'
import Fruittable from './component/fruittable'
import Main from './component/main'
import Footer from '../index/component/bottom' 
import axios from '../../../axios/axios';
export default function index() {
  let [fruitNames, setfruitNames] = useState([]);
  useEffect(() => {
    getdata()
  },[])
  let getdata=()=>{
    axios.get('http://localhost:3000/fan/shop_list').then(res=>{
     console.log(res.data.data);
     setfruitNames(res.data.data)
    })
  }
  return (
    <div className='index'>
      <Header></Header>
      <Searchbar></Searchbar>
      <Bread></Bread>
      <Fruittable></Fruittable>
      <div className='list-xu'>
        <p>综合</p>
        <p>销量</p>
        <p>口碑</p>
        <p>价格</p>
      </div>
      <div className='main'>
      {
        fruitNames.map((item,index)=>{
          return  <Main key={index} item={item}></Main>
        })
      }
      </div>
      <Footer></Footer>
    </div>
  )
}
